<template>
	<div>
		<div class="header-box">
			<div class="header">
				<div class="content">
<!--					<div class="logo full-left"><img @click="jump('/')" src="../../assets/img/logo3.png" alt="" /></div>-->
					<div class="login-bar full-right">
						<div class="login-box full-left">
							<span>联系我们</span>
							&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
							<span>常见问题</span>
							&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
							<span type="primary" @click="logout">注销</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-card style="margin-top: 20px;margin-left: 12.5rem;margin-right: 12.5rem;">
			<el-row>
				<el-col :span="8">
					<div style="margin-top: 15px;">
						<el-input placeholder="姓名/手机号/地址" class="input-with-select"><el-button slot="append" icon="el-icon-search" v-if="this.role !== 1"></el-button></el-input>
					</div>
				</el-col>
				<el-col :span="3"><el-button type="primary" style="margin-top: 15px" v-if="this.role === 1" @click="adminTotal">进入总部</el-button></el-col>
				<el-col :span="13">
					<div style="margin-top: 18px;float: right;"><el-button size="mini" type="primary" @click="addStore()" v-if="this.role !== 1">新建门店</el-button></div>
				</el-col>
			</el-row>
		</el-card>
		<el-card style="margin-top: 20px;margin-left: 12.5rem;margin-right: 12.5rem;">
			<div v-if="dataList.length == 0" style="text-align: center;">
				<i class="el-icon-document" style="font-size: 50px;margin: 28px 0px 18px 0px;"></i>
				<p style="margin-bottom: 18px;">
					空空如也，
					<el-button @click="addStore" type="text">立即创建</el-button>
				</p>
			</div>
			<el-row>
				<el-col :span="10" v-for="(item, index) in dataList" :key="index" :offset="index % 2 == 0 ? 1 : 2" style="margin-bottom: 20px;">
					<el-card shadow="hover" :body-style="{ padding: '0px' }">
						<el-row :gutter="20">
							<el-col :span="8">
								<div style="overflow: hidden;height: 100px;margin: 10px;">
									<img :src="item.ewmLogo" class="image" v-if="item.ewmLogo" />
									<img src="../../assets/img/no-img1.png" class="image" v-else />
								</div>
							</el-col>
							<el-col :span="16">
								<div style="padding: 14px;">
									<span>{{ item.name }}</span>
									<div class="bottom clearfix">
										<p class="time">{{ item.address }}</p>
										<!-- 1待审核,2通过，3拒绝-->
										<el-button type="text" class="button" v-if="item.status == 2" @click="adminSeller(item)">进入管理</el-button>
										<el-button type="text" class="button" v-if="item.status == 1" disabled>待审核</el-button>
										<el-popover v-if="item.status == 3" placement="top" trigger="hover" width="160">
											<p style="line-height: 20px;margin-bottom: 10px;">{{ item.stateMsg ? item.stateMsg : '暂无原因' }}</p>
											<div style="text-align: right;"><el-button type="primary" size="mini" @click="againSubmit(item)">重新提交</el-button></div>
											<el-button slot="reference" type="text" class="button" v-if="item.status == 3">
												审核失败
												<i class="el-icon-question"></i>
											</el-button>
										</el-popover>
									</div>
								</div>
							</el-col>
						</el-row>
					</el-card>
				</el-col>
			</el-row>
		</el-card>

		<add-or-update ref="addOrUpdate" v-if="addOrUpdateVisible"></add-or-update>
	</div>
</template>

<script>
import AddOrUpdate from './tstoreseller-add-or-update';
import { clearLoginInfo } from '@/utils';
export default {
	data() {
		return {
			role: '',
			dataList: [],
			addOrUpdateVisible: false,
			storeForm: {
				name: ''
			}
		};
	},

	components: {
		AddOrUpdate
	},

	created() {
		this.getDataList();
	},

	methods: {
		/**
		 * 进入总部（管理员权限）
		 */
		adminTotal() {
			this.$router.replace({ name: 'home' });
		},

		/**
		 * @param {Object} item商家进入管理
		 */
		adminSeller(item) {
			sessionStorage.setItem('sellerInfo', JSON.stringify(item));
			sessionStorage.setItem('seller', item.sellerId);
			//保存当班信息
			this.$http({
				url: this.$http.adornUrl('/keepChangeWorkInfo'),
				method: 'get',
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.role = data.role;
					this.dataList = data.list;
				} else {
					this.dataList = [];
					this.totalPage = 0;
				}
			});
			this.$router.replace({ name: 'home' });
		},

		getDataList() {
			this.$http({
				url: this.$http.adornUrl('/store/tstoreseller/listByUserId'),
				method: 'get',
				params: this.$http.adornParams({
					page: 1,
					limit: 100
				})
			}).then(({ data }) => {
				console.log(JSON.stringify(data));
				if (data && data.code === 0) {
					this.role = data.role;
					this.dataList = data.list;
				} else {
					this.dataList = [];
					this.totalPage = 0;
				}
			});
		},
		/**
		 *
		 */
		// 新增 / 修改
		addStore() {
			this.addOrUpdateVisible = true;
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init(0);
				this.getDataList();
			});
		},
		/**
		 * 注销
		 */
		logout() {
			this.$confirm(`确定进行[注销]操作?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$http({
						url: this.$http.adornUrl('/sys/logout'),
						method: 'post',
						data: this.$http.adornData()
					}).then(({ data }) => {
						if (data && data.code === 0) {
							clearLoginInfo();
							sessionStorage.removeItem('sellerInfo');
							sessionStorage.removeItem('seller');
							this.$router.push({ name: 'login' });
						}
					});
				})
				.catch(() => {});
		}
	},

	mounted() {
		//防止页面后退
		history.pushState(null, null, document.URL);
		window.addEventListener('popstate', function() {
			history.pushState(null, null, document.URL);
		});
	}
};
</script>

<style scoped>
.header-box {
	height: 80px;
}

.header {
	width: 100%;
	height: 80px;
	box-shadow: 0 0.5px 0.5px 0 #c9c9c9;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 99;
	background: #fff;
}

.header .content {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}

.header .content .logo {
	height: 80px;
	line-height: 80px;
	margin-right: 50px;
	cursor: pointer;
}

.header .content .logo img {
	vertical-align: middle;
}

.header .nav li {
	float: left;
	height: 80px;
	line-height: 80px;
	margin-right: 30px;
	font-size: 16px;
	color: #4a4a4a;
	cursor: pointer;
}

.header .nav li span {
	padding-bottom: 16px;
	padding-left: 5px;
	padding-right: 5px;
}

.header .nav li span a {
	display: inline-block;
}

.header .nav li .this {
	color: #4a4a4a;
	border-bottom: 4px solid #ffc210;
}

.header .nav li:hover span {
	color: #000;
}

.header .login-bar {
	height: 80px;
}

.header .login-bar .shop-cart {
	margin-right: 20px;
	border-radius: 17px;
	background: #f7f7f7;
	cursor: pointer;
	font-size: 14px;
	height: 28px;
	width: 88px;
	margin-top: 30px;
	line-height: 32px;
	text-align: center;
}

.header .login-bar .shop-cart:hover {
	background: #f0f0f0;
}

.header .login-bar .shop-cart img {
	width: 15px;
	margin-right: 4px;
	margin-left: 6px;
}

.header .login-bar .shop-cart span {
	margin-right: 6px;
}

.header .login-bar .login-box {
	margin-top: 33px;
}

.header .login-bar .login-box span {
	color: #4a4a4a;
	cursor: pointer;
}

.header .login-bar .login-box span:hover {
	color: #000000;
}

.full-left {
	float: left !important;
}

.full-right {
	float: right !important;
}

.el-carousel__arrow {
	width: 120px;
	height: 120px;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
	background: #ffc210;
	border-color: #ffc210;
	border: none;
}

.el-checkbox__inner:hover {
	border-color: #9b9b9b;
}

.el-checkbox__inner {
	width: 16px;
	height: 16px;
	border: 1px solid #9b9b9b;
	border-radius: 0;
}

.el-checkbox__inner::after {
	height: 9px;
	width: 5px;
}
.container {
	width: 1200px;
	margin: 0 auto;
}

#granted-hotels {
	margin-bottom: 1em;
}

#granted-hotels li {
	float: left;
	margin-left: 1em;
	margin-top: 20px;
}

#granted-hotels li a {
	background-color: #599bb3;
	border-radius: 15px;
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	font-size: 18px;
	font-weight: bold;
	padding: 32px 32px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #3d768a;
}

.choosetheformat .time {
	font-size: 13px;
	width: 70%;
	line-height: 25px;
	color: #999;
}

.choosetheformat .bottom {
	margin-top: 13px;
	line-height: 12px;
}

.choosetheformat .button {
	padding: 0;
	float: right;
}

.choosetheformat .image {
	width: 100%;
	display: block;
}

.choosetheformat .clearfix:before,
.choosetheformat .clearfix:after {
	display: table;
	content: '';
}

.choosetheformat .clearfix:after {
	clear: both;
}

.choosetheformat .el-tabs__header.is-top {
	margin-bottom: 0;
}

.choosetheformat .el-card.box-card {
	border-top: none;
}

.choosetheformat .demo-form-inline .el-form-item {
	margin-bottom: 0px;
}
</style>
